<template>
    <div class="flexbetween">
        <div class="inputMain">
            <el-form ref="form" :model="form" label-width="100px">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item label="合同名称">
                            <el-input size="small" v-model="form.contractName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="审批编号">
                            <el-input size="small" v-model="form.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item label="审批发起时间">
                            <el-date-picker
                                v-model="value1"
                                type="daterange"
                                size="small"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="type!='second'">
                        <el-form-item label="审批状态">
                            <el-select size="small" v-model="form.auditStatus" placeholder="审批状态">
                                <el-option label="审批中" value="0"></el-option>
                                <el-option label="审批通过" value="1"></el-option>
                                <el-option label="审批驳回" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发起人">
                            <el-input size="small" v-model="form.promoterName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="6" v-if="show">
                        <el-form-item label="审批时间">
                            <el-date-picker
                                v-model="value"
                                type="daterange"
                                size="small"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :clearable="false">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="show">
                        <el-form-item label="参与人">
                            <el-input size="small" v-model="form.participantsName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="show">
                        <el-form-item label="发起方">
                            <el-input size="small" v-model="form.promoterEnterprise" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <!-- <el-row :gutter="10" v-if="type=='first'||type=='second'">
                    <el-col :span="6">
                        <el-form-item label="审批节点状态" v-if="show">
                            <el-button size="mini">全部</el-button>
                            <el-button size="mini">中间节点</el-button>
                            <el-button size="mini">终极节点</el-button>
                        </el-form-item>
                    </el-col>
                 </el-row> -->
            </el-form>
        </div>
        <div class="btnMain">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" @click="reset">重置</el-button>
            <el-button @click="changeShow(1)" v-if="show" size="small" icon="el-icon-d-arrow-left" class="active close"></el-button>
            <el-button @click="changeShow(2)" v-if="!show" size="small" icon="el-icon-d-arrow-right" class="active open"></el-button>
        </div>
    </div>
</template>

<script>
export default {
    props:['type'],
    data() {
        return {
            form: {
                contractName: '',//合同名称
                auditNum: '',// 审批编号
                approvalStartTime: '',//审批开始时间
                approvalEndTime: '',// 审批结束时间
                initiateEndTime: '',// 审批发起结束时间
                initiateStartTime: '',// 审批发起开始时间
                auditStatus: '',// 审批状态0审批中1审批通过2审批驳回
                promoterName: '',//发起人
                participantsName: '',//参与人
                promoterEnterprise: '',//发起方
            },
            show:false,
            value:[],
            value1:[],
        }
    },
    watch:{
        'value'(){
            // console.log(Number(this.value1[0]));
            if(this.value=='[]'){
                this.form.approvalStartTime=''
                this.form.approvalEndTime=''
            }else{
                this.form.approvalStartTime=this.date(Number(this.value[0]))
                this.form.approvalEndTime=this.date(Number(this.value[1]))
            }
        },
        'value1'(){
            // console.log(Number(this.value1[0]));
            if(this.value1=='[]'){
                this.form.initiateStartTime=''
                this.form.initiateEndTime=''
            }else{
                this.form.initiateStartTime=this.date(Number(this.value1[0]))
                this.form.initiateEndTime=this.date(Number(this.value1[1]))
            }
        }
    },
    methods: {
        date(timer) {
			var date = new Date(timer); //当前时间
			var year = date.getFullYear() //返回指定日期的年份
			var month = repair(date.getMonth() + 1); //月
			var day = repair(date.getDate()); //日
			var curTime = year + "-" + month + "-" + day
			function repair(i) {
				if (i >= 0 && i <= 9) {
					return "0" + i;
				} else {
					return i;
				}
			}
			return curTime
		},
        search() {
            this.$emit("Listsearch", this.form)
        },
        reset() {
            for (var key in this.form) {
                this.form[key] = "";
            }
            this.value=[]
            this.value1=[]
            this.$emit("Listsearch", this.form)
        },
        changeShow(type){
            if(type==1){
                this.show=false
            }else if(type==2){
                this.show=true
            }
        }
    }
}
</script>

<style lang="scss">
.inputMain{
    .el-select{
        width: 100%;
    }
    .el-date-editor--daterange.el-input__inner{
        width: 100%;
    }
    .el-form-item{
        margin-bottom: 16px;
    }
    .el-button--mini{
        padding:5px 7px;
    }
}
</style>

<style lang="scss" scoped>
.inputMain{
    width:80%;
}
.btnMain{
    align-self: flex-start;
    .active{
        transform: rotate(90deg);
        padding-left: 9px;
        padding-right: 9px;
    }
}
</style>